<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bookstrap日期插件核心css -->
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css"/>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!--  bookstrap日期插件核心js-->
    <script type="text/javascript" src="js/moment.js"></script>
    <script type="text/javascript" src="js/daterangepicker.js"></script>
    <!--彈出框核心文件-->
    <script type="text/javascript" src="js/layer.js"></script>
    <link href="css/layer.css" type="text/css" rel="styleSheet" id="layermcss">
    <script type="text/javascript" src="js/pop.js"></script>
    <title>编辑滿贈活動</title>
</head>
<body>
<div class="record-main">
    <div class="add-shop-title">
        <a href="" onclick="history.go(-1)"><i><img src="images/back-btn.png" width="20px" alt=""/></i>返回</a>
        <span>编辑滿贈活動</span>
    </div>
    <div class="add-active-main">
        <div class="add-active-box">
            <div class="add-active-time">
                <div class="form-group">
                    <p class="form-control-static">活动时间</p>
                </div>
                <div class="form-group"  style="margin: 0 60px 0 20px;">
                    <fieldset>
                        <div class="control-group">
                            <div class="controls">
                                <div class="input-prepend input-group" style="width: 180px;margin-top: -1px;">
                                    <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                    <input type="text" readonly="readonly" value="2016-10-1-2016-10-30" style="width: 190px;background: #ffffff;" name="useDate" id="activeDate" class="form-control"
                                           value=" " />
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="active-box-list">
                <div class="active-list-content">
                    <div class="active-modif-boxs">
                        <div class="add-active-list1">
                            <div class="add-content">
                                <div class="list-content_1">
                                    <span>满</span>
                                    <input type="number" class="list-content-input" id="price_1" value="50" style="width: 80px;"/>
                                    <span>元</span>
                                </div>
                                <div class="list-content_2">
                                    <span>贈</span>
                                    <input type="text"  class="list-content-input" placeholder="满30贈送可樂一罐" style="width: 200px;"/>
                                </div>
                                <div class="list-content_3">满30贈送可樂一罐</div>
                            </div>
                        </div>
                    </div>
                    <div class="active-list" id="add-active">
                    </div>
                    <div class="btn btn-default add-list-btn" id="add" style="background: #00a189;margin-left:260px;color: white;border: none;font-size: 28px;line-height:25px;width: 40px;height: 40px;" onclick="addActive(this)">+</div>
                    <div class="add-active-btn text-center" >
                        <a href="javascript:exist()" class="btn btn-default">取消</a>
                        <a href="full-active.html" class="btn btn-default" style="background: #00a189;color: white;margin-left: 30px;border: none">保存</a>
                    </div>
                </div>
            </div>
            <div class="exist-box">
                <div><p style="margin: 10px 20px;text-align: left;color: white;">
                    <img src="images/mark-icon.png" style="width: 18px;margin-right: 15px;margin-top: -5px;" alt=""/>現在已存在滿贈活動，無法進行創建<p></div>
            </div>
        </div>
    </div>
</div>
<script>
    //添加活動列表
    $('#add').click(function(){
        $("#add-active").append('<div class="add-active-list1">'+
                '<div class="add-content">'+
                '<div class="list-content_1">'+
                '<span>满</span>'+
                '<input type="number" class="list-content-input" id="price_2" onblur="checkRepeat()"/>'+
                '<span>元</span>'+
                '</div>'+
                '<div class="list-content_2">'+
                '<span>赠</span>'+
                '<input type="text" class="list-content-input" placeholder="满50贈送王老吉一罐"/>'+
                '</div>'+
                '<div class="list-content_3">满50贈送王老吉一罐</div>'+
                '</div>'+
                '<div class="delivery-del" onClick="getDel(this)">'+
                '<a href="#" class="del-box del-btn" ></a>'+
                '</div>'+
                '</div>');
    })
    function getDel(k){
        $(k).parent().remove();
    }

    //日期控件
    $(document).ready(function() {
        $('#activeDate').daterangepicker(null, function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });
    });
    //活动存在判断
    function exist(){
        var exist = $(".exist-box");
        exist.addClass("active");
        setTimeout(function () {
            exist.removeClass("active");
        },2000);
    }
    //活动信息重复判断
    function checkRepeat(){
        var price_1 = document.getElementById('price_1');
        var price_2 = document.getElementById('price_2');
        if(price_1.value==price_2.value){
            pop.a('活动优惠信息重复');
        }
    }
</script>
</body>
</html>